<script setup>
import { Message } from "@arco-design/web-vue";
import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
import { ref, computed } from "vue";
import { customAlphabet } from 'nanoid'
const nanoid = customAlphabet('1234567890abcdefghitmnvjkhoplxzvuyqw', 22)
import constants from '@/utils/constants'

import dayjs from "dayjs";
import commonApi from "@/api/commonApi";
const baseUrl = import.meta.env.VITE_API_BASE_URL;
import * as qiniu from 'qiniu-js'

const model = defineModel({ type: String, default: "" })

const props = defineProps({
  action: "",
  name: "file",
  uploadData: {},
  draggable: false,
  showFileList: false,
  accept: "",
  tip: "上传图片",
  height: 120,
  width: 120
});

const file = computed(() => ref({
  url: model.value
}))

const customRequest = (option) => {
  let me = this;
  const { onProgress, onError, onSuccess, fileItem, name } = option
  console.log(fileItem, name);
  let suffix = fileItem.file.name.split('.').pop()
  console.log(suffix);
  let key =
    "images/" +
    dayjs().format("YYYY/MM/DD") +
    "/" +
    nanoid() + "." + suffix;

  commonApi.getUploadToken({ key: key }).then((res) => {
    let observable = qiniu.upload(fileItem.file, key, res);
    let subscription = observable.subscribe({
      next(res) { },
      error(err) { },
      complete(res) {
        model.value = res.key
        file.value = {
          url: res.key,
          status: 'done'
        }
      }
    });
  })

}

const onSuccess = () => {
  Message.success("导入成功");
};

const onChange = (_, currentFile) => {

};
const onProgress = (currentFile) => {

};
</script>

<template>
  <a-space direction="vertical" :style="{ width: '100%' }">
    <a-upload :customRequest="customRequest" :fileList="file ? [file] : []" :show-file-list="false" @change="onChange"
      @progress="onProgress">
      <template #upload-button>
        <div :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`">
          <div class="arco-upload-list-picture custom-upload-avatar"
            :style="{ 'height': height + 'px', 'width': width + 'px' }" v-if="model">
            <a-image v-if="!model.includes('.mp4')" :src="constants.imgDomain + model + '?imageslim/zlevel/7'"
              :width="width" :height="height" fit="cover" />
            <video v-if="model.includes('.mp4')" :src="constants.imgDomain + model" :width="width" :height="height"
              controls fit="cover" />
            <div class="arco-upload-list-picture-mask">
              <IconEdit />
            </div>
            <a-progress v-if="file.status === 'uploading' && file.percent < 100" :percent="model.percent" type="circle"
              size="mini" :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }" />
          </div>
          <div class="arco-upload-picture-card" :style="{ 'height': height + 'px', 'width': width + 'px' }" v-else>
            <div class="arco-upload-picture-card-text">
              <IconPlus />
              <div style="margin-top: 10px; font-weight: 600">{{ tip }}</div>
            </div>
          </div>
        </div>
      </template>
    </a-upload>
  </a-space>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.arco-upload-picture-card {
  flex: 1;
}

.custom-upload-avatar {
  width: 100%;
  // height: 150px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
